<template>
	<view class="content">
        <view v-if="orderStatus != 'after_sale' ">
            <view class="order_state" v-if=" orderStatus == 'unpaid' ">等待付款</view>
            <view class="order_state" v-else-if=" orderStatus == 'shipped' ">已发货</view>
            <view class="order_state" v-else-if=" orderStatus == 'paid' ">等待商家发货</view>
            <view class="order_state" v-else-if=" orderStatus == 'completed' ">订单已完成</view>
            <view class="order_state" v-else-if=" orderStatus == 'cancelled' ">订单已取消</view>
        </view>
        <view v-if=" orderStatus == 'after_sale' ">
            <view class="order_state" v-if=" afterSaleStatus == 'refunding' ">退款申请中</view>
            <view class="order_state" v-if=" afterSaleStatus == 'refund_fail' ">卖家拒绝退款</view>
            <view class="order_state" v-if=" afterSaleStatus == 'refunded' ">已退款</view>

            <view class="order_state" v-if=" afterSaleStatus == 'returning_refunding' ">退货退款申请中</view>
            <view class="order_state" v-if=" afterSaleStatus == 'return_refund_agree' ">卖家已同意,待寄回</view>
            <view class="order_state" v-if=" afterSaleStatus == 'return_refund_back' ">已寄回</view>
            <view class="order_state" v-if=" afterSaleStatus == 'return_refunded' ">已退货退款</view>
            <view class="order_state" v-if=" afterSaleStatus == 'return_refund_fail' ">卖家拒绝退货退款</view>

            <view class="order_state" v-if=" afterSaleStatus == 'exchanging' ">换货申请中</view>
            <view class="order_state" v-if=" afterSaleStatus == 'exchange_agree' ">卖家已同意,待寄回</view>
            <view class="order_state" v-if=" afterSaleStatus == 'exchange_fail' ">卖家已拒绝换货</view>
            <view class="order_state" v-if=" afterSaleStatus == 'exchange_back' ">已寄回</view>
            <view class="order_state" v-if=" afterSaleStatus == 'exchange_shipped' ">换货已发货</view>
            <view class="order_state" v-if=" afterSaleStatus == 'exchange' ">换货已完成</view>
        </view>


		<view class="afterInfo_box" v-for="(item, index) in afterSalesList" :key="index">
			<view class="afterInfo_title">售后信息</view>
			<view style="width: 100%;height: 1rpx;background: #E8E8E8;"></view>

			<view class="afterSales_info">
				<view class="sales_instruct">
					<view class="sales_title">申请说明：</view>
					<view class="limited_info">
						<view class="sales_state">{{ item.rma_reason }}</view>
						<view class="limited_img">
							<view class="image" v-for="(img, i) in item.rma_images" :key="i">
								<u-image mode="aspectFit" :src="checkAndFixUrl(img)" radius="10rpx" width="110rpx" height="110rpx"></u-image>
							</view>
						</view>
					</view>
				</view>
				<view class="sales_info">
					<view class="sales_title">申请时间：</view>
					<view class="sales_state">{{ item.created_at }}</view>
				</view>
                <view class="sales_info">
                    <view class="sales_title">售后类型：</view>
                    <view class="sales_state">{{ handleGetRmaType(item.type) }}</view>
                </view>
                <view class="sales_info">
                    <view class="sales_title">售后状态：</view>
                    <view class="sales_state">{{ handleGetRmaStatus(item.status) }}</view>
                </view>
				<view class="sales_infoCopy">
					<view class="sales_titleTwo">寄回单号：</view>
					<view class="copy_box">
						<view class="sales_orderId">{{ item.rma_logistic_number }}</view>
						<view class="sales_copy" @tap="handleCloneClick(item.rma_logistic_number)">复制</view>
					</view>
				</view>
                <view class="sales_info">
                    <view class="sales_title">卖家回复：</view>
                    <view class="sales_state">{{ item.comment }}</view>
                </view>
			</view>

            <view style="width: 100%;height: 1rpx;background: #E8E8E8;"></view>

            <view class="logistics_number" v-if=" item.logistic_number != '' ">换货物流</view>
            <view class="afterSales_logistics" v-if=" item.logistic_number != '' ">
                <view class="sales_logistics">
                    <view class="logistics_number">物流单号：</view>
                    <view class="copy_box">
                        <view class="sales_orderId">{{ item.logistic_number }}</view>
                        <view class="sales_copy">
                            <u-image :src="getServerStatic('/static/images/a62.png')" width="26rpx" height="26rpx"></u-image>
                        </view>
                    </view>
                </view>
                <u-image mode="aspectFit" :src="checkAndFixUrl(item.logistic_photo)" radius="10rpx" width="100%"></u-image>
            </view>

            <view style="width: 100%;height: 1rpx;background: #E8E8E8;"></view>

		</view>

	</view>
</template>

<script setup>
    import {ref} from "vue"
    import {onLoad} from '@dcloudio/uni-app'
    import {getAfterSalesList} from "@/api/rma";
    import {checkAndFixUrl, getServerStatic} from "@/utils/tool";

    const goBack = () => {
        uni.navigateBack()
    }

    const orderStatus = ref('')
    const afterSaleStatus = ref('')
    const orderId = ref(0)

    onLoad((evt) => {
        console.log('售后列表', evt)
        if (!evt?.order_status || !evt?.after_sale_status || !evt?.order_id) {
            goBack()
        }

        orderId.value = evt.order_id
        orderStatus.value = evt.order_status
        afterSaleStatus.value = evt.after_sale_status

        handleGetAfterSalesList()
    })

    const afterSalesList = ref([])

    const handleGetAfterSalesList = async () => {
        uni.showLoading({
            title: '加载中'
        });
        const {code, data} = await getAfterSalesList({orderId: orderId.value})
        uni.hideLoading();
        if (code === 1) {
            afterSalesList.value = data
        }
        console.log(data)
    }


    // 复制
    const handleCloneClick = (cloneText) => {
        uni.setClipboardData({
            data: cloneText,
            success: () => {
                uni.showToast({
                    title: '复制成功'
                })
            }
        })
    }

    const handleGetRmaType = (type) => {
        if (type == 'refund_do_not_return') {
            return '退款(无需退货)';
        }
        if (type == 'return_and_refund') {
            return '退货退款';
        }
        if (type == 'exchange') {
            return '换货';
        }
        return '';
    }

    const handleGetRmaStatus = (status) => {
        console.log(status)
        if (status == 'refunding') {
            return '退款申请中';
        }
        if (status == 'refunded') {
            return '已退款';
        }
        if (status == 'refund_fail') {
            return '卖家拒绝退款';
        }

        if (status == 'returning_refunding') {
            return '退货退款申请中';
        }
        if (status == 'return_refund_agree') {
            return '卖家已同意,待寄回';
        }
        if (status == 'return_refund_back') {
            return '已寄回';
        }
        if (status == 'return_refunded') {
            return '已退货退款';
        }
        if (status == 'return_refund_fail') {
            return '卖家拒绝退货退款';
        }

        if (status == 'exchanging') {
            return '换货申请中';
        }
        if (status == 'exchange_agree') {
            return '卖家已同意,待寄回';
        }
        if (status == 'exchange_fail') {
            return '卖家已拒绝换货';
        }
        if (status == 'exchange_back') {
            return '已寄回';
        }
        if (status == 'exchange_shipped') {
            return '换货已发货';
        }
        if (status == 'exchange') {
            return '换货已完成';
        }
        return ''
    }


</script>

<style lang="scss" scoped>
	.content {
		padding: 0 26rpx 150rpx;
		background: #F5F6F8;
        height: 100vh;
	}

	.order_state {
        padding-top: 63rpx;
		margin: 0 0 28rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #F55726;
	}

	.afterInfo_box {
		padding: 36rpx 33rpx 1rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		.afterInfo_title {

			font-size: 30rpx;
			font-weight: 500;
			color: #312C2A;
			margin-bottom: 30rpx;
		}

		.afterSales_info {
			margin-top: 30rpx;
			width: 100%;

			.sales_info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.sales_title {

					font-size: 26rpx;
					color: #606672;
				}

				.sales_state {

					font-size: 26rpx;
					color: #312C2A;
				}
			}

			.sales_instruct {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.sales_title {
					font-size: 26rpx;
					color: #606672;
				}
				.limited_info {
					width: 500rpx;
					.sales_state {

						font-size: 26rpx;
						color: #312C2A;
					}
					.limited_img {
						margin-top: 30rpx;
						display: flex;
						justify-content: flex-end;
						flex-wrap: wrap;
						.image {
							margin: 0 0 10rpx 10rpx;

						}
						// align-items: center;
					}
				}
			}

			.sales_infoCopy {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.sales_titleTwo {
					font-size: 26rpx;
					color: #606672;
				}

				.copy_box {
					display: flex;
					align-items: center;

					.sales_orderId {
						font-size: 26rpx;
						color: #312C2A;
					}
					.sales_copy {
						margin-left: 22rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #516DDB;
					}
				}
			}
		}

        .logistics_title {

            font-size: 30rpx;
            font-weight: 500;
            color: #312C2A;
            margin-bottom: 30rpx;
        }
        .afterSales_logistics {
            margin-top: 30rpx;
            .sales_logistics {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24rpx;

                .logistics_number {
                    font-size: 26rpx;
                    color: #606672;
                }

                .copy_box {
                    display: flex;
                    align-items: center;

                    .sales_orderId {
                        font-size: 26rpx;
                        color: #312C2A;
                    }
                    .sales_copy {
                        margin-left: 20rpx;
                        // font-size: 30rpx;
                        // font-weight: 500;
                        // color: #516DDB;
                    }
                }
            }
        }
	}

	.rechange_box {
		margin-top: 22rpx;
		padding: 36rpx 33rpx 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.logistics_title {

			font-size: 30rpx;
			font-weight: 500;
			color: #312C2A;
			margin-bottom: 30rpx;
		}
		.afterSales_logistics {
			margin-top: 30rpx;
			.sales_logistics {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.logistics_number {
					font-size: 26rpx;
					color: #606672;
				}

				.copy_box {
					display: flex;
					align-items: center;

					.sales_orderId {
						font-size: 26rpx;
						color: #312C2A;
					}
					.sales_copy {
						margin-left: 20rpx;
						// font-size: 30rpx;
						// font-weight: 500;
						// color: #516DDB;
					}
				}
			}
		}
	}
</style>
